<template>
  <div class="index">
    <div class="header-box">
      2D转3D工具
    </div>
    <div class="box">

      <div class="left-box">
        <div class="tab-name">
          <div class="tab-title">转换类型 <span>Conversion type</span> </div>
        </div>
        <div class="l-one" @click="goTotab(1)">转3D视频</div>
        <div class="l-one" @click="goTotab(2)">转3D图片</div>
      </div>
      <div class="center-box">
        <div class="top-c">
          <!-- 图片上传 -->
          <div class="img-box" v-if="isType==2">
            <el-upload class="avatar-uploader" :action="uploadUrl" :headers="dataObj" name="path"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="isImageUpload" :src="dialogImageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </div>


          <!-- 视频上传 -->
          <div class="img-box" v-if="isType==1">
            <el-upload class="upload-demo" drag :action="uploadImgUrl" multiple name="path" :show-file-list="false"
              :on-success="handtestSuccess" list-type="multipart/form-data" :before-upload="befortestUpload">

              <video class="videobox" v-if="videoUrl" controls="controls" :key="menuKey" poster="">
                <source :src="videoUrl" type="video/mp4" />
              </video>

              <i v-else class="el-icon-plus avatar-uploader-icon"></i>

              <!-- <el-progress v-if="videoFlag == true" type="line" :percentage="videoUploadPercent"
                style="margin-top: 30px"></el-progress> -->

              <!-- <div class="el-upload__text" slot="tip">将文件拖到此处，或<em>点击上传</em></div> -->
            </el-upload>
            <p>
              说明: 视频格式为mp4格式，每个视频大小不超过300M
            </p>
          </div>
        </div>

        <div class="img-btn">{{ title }}</div>

      </div>
      <div class="right-box">
        <div class="top-r-title">
          <div class="tab-title">参数设置 <span>Parameter setting</span></div>
        </div>
        <!-- 图片模块 -->
        <el-form ref="form" :model="form" label-width="100px" v-if="isType==2">
          <el-form-item label="3D离散度" style="margin-top: 30px;color: #fff;">
            <el-input-number v-model="form.stereo" :precision="1" :step="0.1" size="small" :min="1" :max="2">
            </el-input-number>
          </el-form-item>
          <el-form-item label="图片质量" style="margin-top: 30px;">
            <el-radio-group v-model="form.quality">
              <el-radio :label="'fast'">最快</el-radio>
              <el-radio :label="'best'" style="margin: 0 20px;">最佳</el-radio>
              <el-radio :label="'balance'">平衡</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmitimg" class="tijiao">进行转换</el-button>
          </el-form-item>
        </el-form>

        <!-- 视频模块 -->
        <el-form ref="formdata" :model="formdata" label-width="100px" v-else>
          <el-form-item label="3D离散度" style="margin-top: 30px;color: #fff;">
            <el-input-number v-model="formdata.stereo" :precision="1" :step="0.1" size="small" :min="1" :max="2">
            </el-input-number>
          </el-form-item>
          <el-form-item label="图片质量" style="margin-top: 30px;">
            <el-radio-group v-model="formdata.quality">
              <el-radio :label="'fast'">最快</el-radio>
              <el-radio :label="'best'" style="margin: 0 20px;">最佳</el-radio>
              <el-radio :label="'balance'">平衡</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="视频切割帧数" style="margin-top: 30px;">
            <el-input-number v-model="formdata.frame" :step="1" size="small" :min="1" :max="50">
            </el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmitvideo" class="tijiao">进行转换</el-button>
          </el-form-item>
        </el-form>

        <!-- <div class="r-one">
          <div class="rone-l">离散度:</div>
          <div class="rone-r"><input type="text"></div>
        </div>
        <div class="r-one">
          <div class="rone-l">视频切割帧数:</div>
          <div class="rone-r"><input type="text"></div>
        </div>
        <div class="r-one">
          <div class="rone-l">质量:</div>
          <div class="rone-r"><input type="text"></div>
        </div>
        <div class="btn" @click="getFile">提交</div> -->
      </div>
    </div>
    <div class="footer"></div>
    <div class="right-footer">
      <!-- <div class="btn-box">
        <div class="btn-an">转换中(34)</div>
        <div class="btn-an" @click="getJclist">转换完成(44)</div>
        <div class="btn-an">转换失败(23)</div>
      </div> -->
      <div class="list-box">
        <div class="time">转换成功输出内容 
          <!-- <span @click="getSplist">&nbsp 获取列表</span> &nbsp <span @click="getSpfile">获取视频</span> -->
         </div>
        <div class="list">

          <!-- <img :src="objectURL" alt="" v-if="objectURL!==''"> -->
          <!-- <img :src="objectURL" alt="" v-else> -->
          <!-- <el-image :src="objectURL" style="width: 140px; height: 140px;margin:20px;" :preview-src-list="srcList" /> -->
          <el-image :src="objectURL" style="width: 140px; height: 140px;margin:20px;" v-if="title=='添加图片'&&isImageUpload" />
        </div>
      </div>
    </div>

  </div>

</template>

<script>
  export default {
    components: {},
    data() {
      return {
        uploadUrl: "", //上传文件接口地址
        dialogImageUrl: "",
        bendiimgurl: "", //本地图片后缀
        isImageUpload: false,
        dataObj: "",
        // 图片参数
        form: {
          stereo: 1.6,
          quality: "best",
        },
        // 视频参数
        formdata: {
          stereo: 2,
          quality: "balance",
          frame: 24
        },
        // objectURL: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", //转换成功的图片
        objectURL: "", //转换成功的图片
        title: "添加视频", //按钮文字
        isType: 1,
        // srcList: [
        //   "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        // ],

        // 视频上传
        uploadImgUrl: "", //上传视频的接口地址
        uploadImgData: {
          busiName: 32,
        },
        videoUrl: '', //上传视频成功返回的路径
        taskid: '', //
        // 应付多个组件的情况 记录当前组件的key值
        componentKey: null,
        menuKey: 1, // 用来强制刷新
        // videoFlag: false, // 进度条相关的
        // videoUploadPercent: 0, // 进度条相关的
      };
    },

    created() {
      this.uploadUrl = this.$api.apiUpload;
      this.uploadImgUrl = this.$api.testUpload;
      this.dataObj = {
        Authorization: localStorage.getItem("token"),
      };
    },
    methods: {
      // 点击tab栏切换
      goTotab(index) {
        console.log(index);
        if (index == 1) {
          this.isType = 1;
          this.title = "添加视频";
          this.form.stereo = 1.6;
          this.form.quality = "best";
          this.formdata.stereo = 2;
          this.formdata.quality = "balance";
          this.formdata.frame = 24;
          this.dialogImageUrl = ''
          this.videoUrl = ''
        }
        if (index == 2) {
          this.isType = 2;
          this.title = "添加图片";
          this.form.stereo = 1.6;
          this.form.quality = "best";
          this.formdata.stereo = 2;
          this.formdata.quality = "balance";
          this.formdata.frame = 24;
          this.dialogImageUrl = ''
          this.videoUrl = ''
        }
      },

      handleAvatarSuccess(res, file) {
        console.log(res, "看看上传", file);
        //图片上传成功
        this.dialogImageUrl = URL.createObjectURL(file.raw);
        if (res.code == 0) {
          this.$message.success("图片上传成功!");
          // this.dialogImageUrl = "http://192.168.8.52:5000/api/file/" + res.data.filename;
          this.dialogImageUrl = "http://2to3.lititong.net/api/file/" + res.data.filename;

          this.bendiimgurl = res.data.filename;
          console.log(this.dialogImageUrl, "图片地址");
          this.isImageUpload = true;
        } else {
          this.$message.error("图片上传失败，请重新上传！");
        }
      },

      // 图片上传之前事件
      beforeAvatarUpload(file) {
        //文件上传之前调用做一些拦截限制
        // 图片格式
        const isJPG =
          file.type === "image/jpeg" ||
          file.type === "image/png" ||
          file.type === "image/gif";
        console.log("file.type", file.type);
        // 图片大小
        const isLt10M = file.size / 1024 / 1024 < 10;
        // 判断图片是否是JPG格式
        if (!isJPG) {
          this.$message.error("上传图片只能是 jpeg、png或者gif格式!");
        }
        // 判断图片大小
        if (!isLt10M) {
          this.$message.error("上传图片大小不能超过 10MB!");
        }
        return isJPG && isLt10M;
      },

      // -----logo图片上传beging
      // 点击查看预览图片
      handlePictureCardPreview(file) {
        //预览图片时调用
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
        //因当前业务涉及计算用户与门店之间的间隔距离，方便用户查看门店距离远近，便于选择门店需获取用户所在实时地理位置，申请接口获取经纬度以便计算用户与门店两者之间的间距
      },

      // 点击删除图片
      handleRemove(file, fileList) {
        //移除图片
        this.images = fileList;
      },

      //图片上传超过数量限制提示
      handleExceed(file, fileList) {
        this.$message.error("上传图片不能超过1张!");
      },
      //图片上传失败调用
      imgUploadError(err, file, fileList) {
        this.$message.error("上传图片失败!");
      },
      // -----logo图片上传end

      // 提交转换图片按钮
      onSubmitimg() {
        console.log(this.form, "看看图片参数");
        console.log(this.bendiimgurl, '图片地址')

        let params = this.$qs.stringify({
          filename: this.bendiimgurl,
          stereo_divergence: this.form.stereo,
          quality: this.form.quality,
        });
        console.log(params, "请求图片参数");

        this.$post(this.$api.twoTothree, params).then((res) => {
          console.log(res, "转换结果");
          if (res.code == 0) {
            this.$message.success("转换成功!");
            // 请求列表接口在下面查看图片
            this.getJclist();
          } else {
            this.$message.error("转换失败，请重新转换！");
          }
        });
      },


      // 获取转换后图片列表
      getJclist() {
        this.$get(this.$api.getTaskfile + "/" + this.bendiimgurl).then((res) => {
          console.log(res, "获取图片列表");
          if (!res.ok) {
            this.objectURL = this.$api.getTaskfile + "/" + this.bendiimgurl;
            console.log(this.objectURL, "获取路径");
          } else {
            this.$message.error("图片转换失败，请重新进行转换！");
          }
        });
      },

      // 上传成功
      handtestSuccess(res, file) {
        console.log(res, "看看上传视频", file);
        // 进度条恢复到初始状态
        // this.videoFlag = false;
        // this.videoUploadPercent = 0;
        ++this.menuKey;
        this.videoUrl = encodeURI("http://192.168.8.52:5001/api/test/file/" + res.data.filename);
        this.taskid = res.data.task_id
        console.log(this.videoUrl, "图片地址", this.taskid);
      },
      // 图片上传之前事件
      befortestUpload(file) {
        console.log(file, "看看视频类型");
        //文件上传之前调用做一些拦截限制
        // 视频格式
        const isMp4 = file.type === "video/mp4";
        // 视频大小
        const isLt2M = file.size / 1024 / 1024 < 300;
        // 判断图片是否是JPG格式
        if (!isMp4) {
          this.$message.error("上传视频只能是mp4格式!");
        }
        // 判断图片大小
        if (!isLt2M) {
          this.$message.error("上传视频大小不能超过 300MB!");
        }
        return isMp4 && isLt2M;
      },
      //进度条
      // uploadVideoProcess(event, file, fileList) {
      //   this.videoFlag = true;
      //   this.videoUploadPercent = parseInt(file.percentage);
      // },

      // 提交转换视频按钮
      onSubmitvideo() {
        console.log(this.formdata, "看看视频参数");
        console.log(this.taskid, '任务id')
        // 视频
        let params = this.$qs.stringify({
          stereo_divergence: this.formdata.stereo,
          quality: this.formdata.quality,
          frame_rate: this.formdata.frame,
          task_id: this.taskid
        });
        console.log(params, "请求视频参数");
        this.$post(this.$api.testtwoTothree, params).then((res) => {
          console.log(res, "转换结果");
          if (res.code == 0) {
            this.$message.success("转换成功!");
            // 请求列表接口在下面查看图片
            this.getSplist();
          } else {
            this.$message.error("转换失败，请重新转换！");
          }
        });
      },

      // 获取转换后视频列表
      getSplist() {
        this.$get(this.$api.getSplist).then((res) => {
          console.log(res, "获取视频列表");
          // if (!res.ok) {
          //   this.objectURL = this.$api.getTaskfile + "/" + this.bendiimgurl;
          //   console.log(this.objectURL, "获取路径");
          // } else {
          //   this.$message.error("图片转换失败，请重新进行转换！");
          // }
        });
      },

      // 获取2转3视频
      getSpfile(){
        let id = '65def691ece5c36d04dc9c93'

        this.$get(this.$api.getSpfile + '/'+ id).then((res) => {
          console.log(res, "获取转换后的视频");
          // if (!res.ok) {
          //   this.objectURL = this.$api.getTaskfile + "/" + this.bendiimgurl;
          //   console.log(this.objectURL, "获取路径");
          // } else {
          //   this.$message.error("图片转换失败，请重新进行转换！");
          // }
        });
      }
    }
  };
</script>

<style scoped>
  * {
    padding: 0;
    margin: 0;
    background-color: rgb(2, 10, 36);
  }

  .header-box {
    height: 14vh;
    line-height: 14vh;
    text-align: center;
    font-size: 22px;
    color: #fff;
    background: url("../../assets/img/header.png") no-repeat;
    background-size: cover;
  }

  .box {
    display: flex;
    height: 82vh;
  }

  .left-box {
    width: 366px;
    /* height: 82vh; */
  }

  .tab-name {
    color: #fff;
    height: 40px;
    font-weight: bold;
    background: url("../../assets/img/tab.png") no-repeat;
    background-size: cover;
    position: relative;
  }

  .tab-title {
    position: absolute;
    top: 10px;
    left: 40px;
    /* font-size: 16px; */
    background-clip: text;
    /* letter-spacing: 4px; */
  }

  .tab-title span {
    color: rgb(86, 104, 132);
    font-size: 14px;
    background-clip: text;
  }

  .l-one {
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 50px auto;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid rgb(44, 153, 255);
    color: #fff;
    background-image: linear-gradient(to right,
        rgb(18, 32, 63),
        rgb(69, 106, 180),
        rgb(18, 32, 63));
  }

  .center-box {
    flex: 1;
    background-image: linear-gradient(to right,
        rgb(2, 10, 36),
        rgb(69, 106, 180),
        rgb(2, 10, 36));
  }

  .right-box {
    width: 366px;
  }

  .top-c {
    flex: 1;
    background-image: linear-gradient(to right,
        rgb(2, 10, 36),
        rgb(69, 106, 180),
        rgb(2, 10, 36));
  }

  .img-box {
    width: 500px;
    height: 250px;
    margin: 30px auto;
    border: 1px solid rgb(0, 255, 255);
    border-radius: 10px;
    background-image: linear-gradient(90deg,
        rgba(196, 233, 64, 0) 0%,
        rgb(62, 224, 84) 100%),
      linear-gradient(0deg, rgb(62, 224, 84) 0%, rgba(196, 233, 64, 0) 100%),
      linear-gradient(-90deg, rgba(196, 233, 64, 0) 0%, rgb(62, 224, 84) 100%),
      linear-gradient(0deg, rgba(196, 233, 64, 0) 0%, rgb(62, 224, 84) 100%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 250px 4px, 4px 250px, 250px 4px, 4px 250px;
    animation: moveLine 4s infinite linear;
    position: relative;
    box-shadow: 0px 0px 30px #00d9ff;
  }

  .img-box p {
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin: 0 10px;
  }

  /******************************* */

  /deep/.avatar-uploader .el-upload {
    border: 1px dashed rgb(0, 162, 190);
    border-radius: 6px;
    cursor: pointer;
    position: absolute;
    overflow: hidden;
    width: 90%;
    left: 5%;
    top: 10px;
  }

  /deep/.avatar-uploader .el-upload:hover {
    border-color: rgb(0, 217, 255);
  }

  /deep/.avatar-uploader-icon {
    font-size: 28px;
    color: #00d9ff;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  /deep/.avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  /deep/.el-upload__text {
    color: #00ffff;
  }

  .el-upload__tip {
    color: #ff3838;
    text-align: center;
    width: 80%;
    margin: 20px auto;
    position: absolute;
    bottom: 0px;
    left: 10%;
  }

  /******************************* */

  .img-btn {
    height: 44px;
    width: 200px;
    line-height: 44px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid rgb(44, 153, 255);
    color: #fff;
    margin: 30px auto;
    background-image: linear-gradient(to right,
        rgb(18, 32, 63),
        rgb(69, 106, 180),
        rgb(18, 32, 63));
  }

  .top-r-title {
    color: #fff;
    font-weight: bold;
    height: 40px;
    width: 366px;
    background: url("../../assets/img/tab.png") no-repeat;
    background-size: cover;
    position: relative;
  }

  .r-one {
    margin: 15px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .rone-l {
    color: #fff;
    padding-right: 15px;
  }

  .rone-r input {
    width: 250px;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    border: none;
    background-color: #e7e7e7;
    border: 1px solid rgb(0, 238, 255);
  }

  .btn {
    height: 44px;
    width: 200px;
    line-height: 44px;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    margin: 30px auto;
    border: 1px solid rgb(44, 153, 255);
    background-image: linear-gradient(to right,
        rgb(18, 32, 63),
        rgb(69, 106, 180),
        rgb(18, 32, 63));
  }

  .right-footer {
    height: 420px;
    position: absolute;
    bottom: 40px;
    width: 100%;
  }

  .btn-box {
    color: #fff;
    display: flex;
    align-items: center;
    padding-left: 65px;
  }

  .btn-an {
    height: 34px;
    width: 120px;
    font-size: 16px;
    line-height: 34px;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    margin: 0 20px;
    border: 1px solid rgb(42, 179, 0);
    background-image: linear-gradient(to right,
        rgb(35, 63, 18),
        rgb(48, 201, 48),
        rgb(35, 63, 18));
  }

  .btn-an:first-child {
    border: 1px solid rgb(0, 179, 155);
    background-image: linear-gradient(to right,
        rgb(18, 63, 61),
        rgb(57, 219, 211),
        rgb(18, 63, 61));
  }

  .btn-an:last-child {
    border: 1px solid rgb(179, 0, 0);
    background-image: linear-gradient(to right,
        rgb(63, 18, 18),
        rgb(255, 70, 70),
        rgb(63, 18, 18));
  }

  .list-box {
    border: 1px dashed rgb(60, 255, 0);
    margin: 15px 85px;
    height: 360px;
    overflow: hidden;
    overflow-y: scroll;
  }

  .list-box::-webkit-scrollbar {
    display: none;
  }

  .time {
    color: #fff;
    font-size: 18px;
    margin-top: 10px;
    padding-left: 10px;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .list-box img {
    width: 140px;
    height: 140px;
    display: block;
    margin: 10px;
  }

  .footer {
    height: 40px;
    background: url("../../assets/img/footer.png") no-repeat;
    background-size: cover;
  }

  @keyframes moveLine {
    0% {
      background-position: -250px 1px, calc(100% - 1px) -250px,
        calc(100% + 250px) calc(100% - 1px), 1px 0px;
    }

    25% {
      background-position: 100% 1px, calc(100% - 1px) -250px,
        calc(100% + 250px) calc(100% - 1px), 1px -250px;
    }

    50% {
      background-position: calc(100% + 250px) 1px, calc(100% - 1px) 100%,
        calc(100% + 250px) calc(100% - 1px), -250px -250px;
    }

    75% {
      background-position: calc(100% + 250px) 1px,
        calc(100% - 1px) calc(100% + 250px), 0px calc(100% - 1px),
        1px calc(100% + 250px);
    }

    100% {
      background-position: calc(100% + 250px) 1px,
        calc(100% - 1px) calc(100% + 250px), -250px calc(100% - 1px), 1px 0px;
    }
  }

  .tijiao {
    height: 34px;
    width: 120px;
    font-size: 16px;
    line-height: 34px;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    margin-top: 50px;
    border: 1px solid rgb(44, 153, 255);
    background-image: linear-gradient(to right,
        rgb(18, 32, 63),
        rgb(69, 106, 180),
        rgb(18, 32, 63));
  }

  .editPage__video .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .editPage__video .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .editPage__video .avatar-uploader-icon {
    font-size: 16px;
    color: #8c939d;
    width: 350px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }

  .editPage__video .avatar {
    width: 350px;
    height: auto;
    display: block;
  }

  .editPage__video .title {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .editPage__video .img__con .el-button {
    width: 100%;
    margin: 10px 0 20px 0;
  }

  /* 视频播放区域 */
  /deep/ .el-upload {
    display: block;
    width: 100%;
  }

  /deep/ .el-upload-dragger {
    width: 100%;
    background-color: rgb(2, 10, 36);
  }

  .upload-demo {
    width: 80%;
    margin: 10px auto;
  }

  .videobox {
    width: 85%;
  }

  /* video::-webkit-media-controls-current-time-display {
      color: red;
      width: 100%;
      height: 100%;
      border: 1px solid darkgoldenrod;
   } */
</style>
